<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <!--遍历人员-->
  <input placeholder="请输入姓名" type="text" v-model="keyWord">
  <ul>
    <li v-for="(p,index) in persons2" :key="index">
      {{p.name}}-{{p.age}}-{{p.sex}}
    </li>
  </ul>


</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#root',
    data: {
      persons: [
        {id: '001', name: '马冬梅', age: 17,sex:'女'},
        {id: '002', name: '周冬雨', age: 18,sex:'女'},
        {id: '003', name: '周杰伦', age: 19,sex:'男'},
        {id: '004', name: '温兆伦', age: 20,sex:'男'}
      ],
      keyWord:'',
      persons2:[]
    },
    watch:{
      keyWord:{
        immediate : true,
        handler(n,o){
          if(n != ''){
            this.persons2 = this.persons.filter((p)=>{
              return p.name.indexOf(n)>-1
            })
          }else{
            this.persons2 = this.persons
          }
        }
      }
    }
  });
</script>
</body>
</html>
